<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人主页（我的视角）</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 引入字体 -->
    <script th:src="@{/js/libs/webfontloader.min.js}"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>
    <!-- 引入bootstrap css -->
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
    <!-- 引入主要 css -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/fonts.min.css}">
</head>
<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div id="hellopreloader">
    <div class="preloader">
        <svg width="45" height="45" stroke="#fff">
            <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="8">
                    <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                             values="6;1;2;3;4;5;6"/>
                </circle>
            </g>
        </svg>
        <div class="text">Loading ...</div>
    </div>
</div>
<!-- ... end Preloader 结束预加载-->
<!-- Fixed Sidebar Left 左侧菜单 -->
<div th:replace="common/sidebar_left :: sidebar"></div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->

<!-- Header-BP 头部导航栏-->
<div th:replace="common/headNav :: headNav"></div>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--end头部空间-->

<!-- Top Header-Profile 个人主页头部-->
<div th:replace="common/headerProfile :: headerProfile"></div>
<!-- ... end Top Header-Profile 结束个人主页头部-->

<!--container个人主页主体-->
<div class="container">
    <div class="row">
        <!-- 中间动态列 -->
        <div class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">
            <div id="newsfeed-items-grid">
                <table>
                    <tbody>
                    <tr th:each="publish, publishStat : ${publishes}" th:if="${publishStat.count}<=2">
                        <td>
                            <!-- 单条动态 -->
                            <div class="ui-block">
                                <article class="hentry post">
                                    <!--数据：动态发布者昵称、头像、动态发布时间-->
                                    <div class="post__author author vcard inline-items">
                                        <img th:src="@{${user.headPhoto}}" alt="author">
                                        <div class="author-date">
                                            <a class="h6 post__author-name fn" href="02-ProfilePage.html"
                                               th:href="@{/profilePage(userId=${user.userId})}" th:text="${user.uname}">James
                                                Spiegel</a>
                                            <div class="post__date">
                                                <time class="published"
                                                      th:text="${#calendars.format(publish.pTime,'yyyy/MM/dd HH:mm')}">>
                                                    2021/3/25 10:39
                                                </time>
                                            </div>
                                        </div>
                                        <div class="more">
                                            <svg class="olymp-three-dots-icon">
                                                <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-three-dots-icon"
                                                th:href="@{/svg-icons/sprites/icons.svg#olymp-three-dots-icon}"></use>
                                            </svg>
                                            <ul class="more-dropdown">
                                                <!--数据：动态详情地址-->
                                                <li>
                                                    <a href="10-PublishDetail.html"
                                                       th:href="@{/publish/{pId}/detail(pId=${publish.pId})}">
                                                        <button class="btn btn-primary btn-sm">查看详情</button>
                                                    </a>
                                                </li>
                                                <!--事件：删除动态-->
                                                <li>
                                                    <a href="10-PublishDetail.html"
                                                       th:href="@{/publish/{pId}/delete(pId=${publish.pId})}">
                                                        <button class="btn btn-primary btn-sm">删除动态</button>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--数据：动态内容概要-->
                                    <p th:text="${publish.pContent}">
                                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                        fugiat
                                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                                        qui
                                        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste
                                        natus
                                        error sit voluptatem accusantium doloremque.
                                    </p>
                                    <!--数据：动态被赞以及被评论数-->
                                    <div class="post-additional-info inline-items">
                                        <!--事件：点赞处理-->
                                        <button id="greatButton" onclick="greatClick(this)" class="post-add-icon inline-items btn">
                                            <a th:href="@{/publish/{pId}/great(pId=${publish.pId})}">
                                                <svg class="olymp-heart-icon">
                                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-heart-icon"
                                                    th:href="@{/svg-icons/sprites/icons.svg#olymp-heart-icon}"></use>
                                                </svg>
                                            </a>
                                            <!--被赞数量-->
                                            <span th:text="${publish.likeNum}">8</span>
                                        </button>
                                        <div class="comments-shared">
                                            <button class="post-add-icon inline-items btn">
                                                <svg class="olymp-speech-balloon-icon">
                                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"
                                                    th:href="@{/svg-icons/sprites/icons.svg#olymp-speech-balloon-icon}"></use>
                                                </svg>
                                                <!--被评论数量-->
                                                <span th:text="${publish.commentNum}">17</span>
                                            </button>
                                        </div>
                                    </div>
                                </article>
                            </div>
                            <!-- 结束单条动态 -->
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 结束中间动态列 -->

        <!-- 左侧账号概况 -->
        <div class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
            <!--数据：用户各项信息-->
            <div class="ui-block">
                <div class="ui-block-title">
                    <h6 class="title">账号概况</h6>
                </div>
                <div class="ui-block-content">
                    <!-- W-Personal-Info -->
                    <ul class="widget w-personal-info item-block">
                        <li>
                            <span class="title">个人描述</span>
                            <span class="text" th:text="${user.description}"> olore esse praesentium dolores aperiam molestiae!</span>
                        </li>
                        <li>
                            <span class="title">昵称</span>
                            <span class="text" th:text="${user.uname}">James Spiegel</span>
                        </li>
                        <li>
                            <span class="title">账号</span>
                            <span class="text" th:text="${user.account}">xxxxxx</span>
                        </li>
                        <li>
                            <span class="title">年龄</span>
                            <span class="text" th:text="${user.age}">18</span>
                        </li>
                        <li>
                            <span class="title">性别</span>
                            <span class="text" th:text="${user.sex}">男</span>
                        </li>
                        <li>
                            <span class="title">积分</span>
                            <span class="text" th:text="${user.grade}">250</span>
                        </li>
                        <li>
                            <span class="title">等级</span>
                            <span class="text" th:text="${user.integral}">3</span>
                        </li>
                    </ul>
                    <!-- .. end W-Personal-Info -->
                </div>
            </div>
        </div>
        <!-- 结束左侧账号概况 -->

        <!-- 右侧照片展示-->
        <div class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">
            <div class="ui-block">
                <div class="ui-block-title">
                    <h6 class="title">最近照片</h6>
                </div>
                <!--数据：照片路径-->
                <div class="ui-block-content">
                    <!-- W-Latest-Photo -->
                    <ul th:each="photo : ${photos}" class="widget w-last-photo js-zoom-gallery">
                        <li>
                            <a href="../static/img/last-photo1-large.jpg" th:href="@{'/uploads/'+${photo.photoName}}">
                                <img th:src="@{${photo.photoName}}" alt="photo">
                            </a>
                        </li>
                        <li>
                            <a href="../static/img/last-photo1-large.jpg" th:href="@{/img/last-photo1-large.jpg}">
                                <img th:src="@{/img/last-photo1-large.jpg}" alt="photo">
                            </a>
                        </li>
                        <li>
                            <a href="../static/img/last-photo1-large.jpg" th:href="@{/img/last-photo1-large.jpg}">
                                <img th:src="@{/img/last-photo1-large.jpg}" alt="photo">
                            </a>
                        </li>
                    </ul>
                    <!-- .. end W-Latest-Photo -->
                </div>
            </div>
        </div>
        <!-- 结束右侧照片展示 -->
    </div>

</div>
<!--.. end container结束个人主页主体-->

<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img th:src="@{/svg-icons/back-to-top.svg}" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<script th:src="@{/js/jQuery/jquery-3.4.1.js}"></script>
<script th:src="@{/js/libs/jquery.appear.js}"></script>
<script th:src="@{/js/libs/jquery.mousewheel.js}"></script>
<script th:src="@{/js/libs/perfect-scrollbar.js}"></script>
<script th:src="@{/js/libs/jquery.matchHeight.js}"></script>
<script th:src="@{/js/libs/svgxuse.js}"></script>
<script th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
<script th:src="@{/js/libs/Headroom.js}"></script>
<script th:src="@{/js/libs/velocity.js}"></script>
<script th:src="@{/js/libs/ScrollMagic.js}"></script>
<script th:src="@{/js/libs/jquery.waypoints.js}"></script>
<script th:src="@{/js/libs/jquery.countTo.js}"></script>
<script th:src="@{/js/libs/popper.min.js}"></script>
<script th:src="@{/js/libs/material.min.js}"></script>
<script th:src="@{/js/libs/bootstrap-select.js}"></script>
<script th:src="@{/js/libs/smooth-scroll.js}"></script>
<script th:src="@{/js/libs/selectize.js}"></script>
<script th:src="@{/js/libs/swiper.jquery.js}"></script>
<script th:src="@{/js/libs/isotope.pkgd.js}"></script>
<script th:src="@{/js/libs/ajax-pagination.js}"></script>
<script th:src="@{/js/libs/circle-progress.js}"></script>
<script th:src="@{/js/libs/loader.js}"></script>
<script th:src="@{/js/libs/run-chart.js}"></script>
<script th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
<script th:src="@{/js/libs/ion.rangeSlider.js}"></script>
<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/libs-init/libs-init.js}"></script>
<script defer th:src="@{/fonts/fontawesome-all.js}"></script>
<script th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>

<script>
    function greatClick(t) {
        // alert("hh") ;
        // $(".post-add-icon").css("fill","") ;
        // $("#greatButton").toggleClass('great-click') ;
        $("#greatButton").css("fill","#ff5e3a") ;
        var num = $("#greatNum").text() ;
        $("#greatNum").text(parseInt(num)+1) ;
    }
</script>

</body>

</html>